<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';

const route =useRoute()
console.log(route.query.fprice );
function returnClick(){
    router.push(   {
     name: 'detail',
        query: {
          bed:  route.query.bed,
          kind:  route.query.kind,
          price:  route.query.price,
          start: route.query.start,
          img:route.query.img
        }
})
}
const router =useRouter()
function  backClick() {
    router.go(-1);
}
</script>
<template>
    <main class="box">
    <div class="content"> 
        <div class="toptitle">
    <van-icon @click="backClick()" class="back" size="50" name="arrow-left" />
    <div class="pay">订单详情</div>
   </div>
   <div class="cancleback">
    <van-icon class="cancleicon" color="white" size="50px" name="../../../public/取消订单.png" />
    <div class="cancleup">已取消</div>
    <div class="cancledown">您的订单已取消</div>
   </div>
   <div class="totaluse">
   <div class="tprice">
   <div class="totalprice">订单总额&nbsp;&nbsp;<span>￥{{ route.query.fprice }}</span></div>
   <div class="detailprice">费用明细<van-icon name="arrow" /></div>
   </div>
   <van-button class="return" @click="returnClick" plain type="primary">再次预订</van-button>
   </div>
   <div class="lastmessage">
   <div class="timebox">
   <div class="time">预计到店时间</div>
   <div class="save">酒店将尽量为您保留房间</div>
   <div class="date">{{ route.query.month }}月{{ route.query.day }}日 {{ route.query.hour }}:{{ route.query.min }}</div>
   </div>
   <div class="messagebox">
   <div class="messageuse"><span>入住人</span><span>{{ route.query.name }}</span></div>
   <div class="messageuse"><span>联系手机</span><span>{{ route.query.phone }}</span></div>
   <div class="messageuse"><span>房间信息</span><span>标准大床房一间</span></div>
   <div class="messageuse"><span>入住日期</span><span>{{ route.query.month}}月{{ route.query.day }}日~{{ route.query.nmonth}}月{{ route.query.nday }}日(1晚)</span></div>
   </div>
   </div>
   <div class="aboutmessage">
    <div class="messageuse"><span>下单时间</span><span>{{route.query.year}}-{{ route.query.month}}-{{ route.query.day }} &nbsp;{{ route.query.hour }}:{{ route.query.min }}:{{ route.query.sec }}</span></div>
    <div class="messageuse"><span>订单编号</span><span>{{route.query.number}}</span></div>
   </div>


    </div>
    </main>
</template>

<style lang="scss" scoped>
main,.box,.content{
    width: 100%;
    height: 100%;
    background-color: #fbfbfb;
}
.toptitle{
    width: 100%;
    height: 0.5rem;
    position: relative;
    .bacK{
        position: absolute;
        top: 5px;
        left: 10px;
    }
    .pay{
        font-size: 20px;
        position: absolute;
        top: 15px;
        left:calc(50% - 35px);
    }
}
.cancleback{
    width: 100%;
    height: 1.8rem;
    background-color: #7f8ea3;
    position: relative;
    .cancleicon{
        position: absolute;
        top: 50px;
        left: 120px;
    }
    .cancleup{
        font-size: 19px;
        color: white;
        font-weight: 540;
        position: absolute;
        top: 50px;
        left: 190px;
    }
    .cancledown{
        font-size: 17px;
        color: white;
     
        position: absolute;
        top: 90px;
        left: 190px;
    }
}
.totaluse{
    width: 90%;
    height: 2rem;
    background-color: white;
    position: absolute;
    left: 5%;
    top: 190px;
    border-radius: 5px;
    .tprice{
        width: 98%;
        height: 0.8rem;
        margin-left: 1%;
        border-bottom: 1px solid #f2f2f2;
        .totalprice{
            font-size: 20px;
            position: absolute;
            left: 20px;
            top: 0.5rem;
            span{
                color: red;
                font-weight: 700;
            }
        }
        .detailprice{
            font-size: 18px;
            position: absolute;
            right: 50px;
            top: 0.5rem;
        }
    }
    .return{
        width: 140px;
        height: 40px;
        border-radius: 5px;
        position: absolute;
        left: calc(50% - 70px);
        top: 120px;
    }
}
.lastmessage{
    width: 90%;
    height: 2.5rem;
 
    position: absolute;
    left: 5%;
    top: 440px;
    border-radius: 5px;
    .timebox{
        width: 94%;
        height: 0.8rem;
    
        margin:  0 auto;
        position: relative;
        .time{
            font-size: 20px;
            font-weight: 700;
            position: absolute;
            top: 20px;
            left: 0;
        }
        .save{
            font-size: 16px;  
            position: absolute;
            top: 50px;
            left: 0;
        }
        .date{
            font-size: 14px;
            position: absolute;
            top: 35px;
            right: 0;
        }
    }
    .messagebox{
        width: 94%;
    height: 1.6rem;

    margin:  10px auto;
    position: relative;
    border-radius: 5px;
    .messageuse{
        display: flex;
        justify-content: space-between;
        font-size: 19px;
        padding: 10px 0;
    }
    }
}
.aboutmessage{
    width: 90%;
    height: 1rem;

    position: absolute;
    left: 5%;
    top: 740px;
    border-radius: 5px;
    .messageuse{
        width: 94%;
        margin:  0 auto;
        display: flex;
        justify-content: space-between;
        font-size: 19px;
        padding: 10px 0;
    }
}
</style>
    